<template>
  <!-- 创建子组件 -->
  <div class="article_list">
    <!-- 子组件，拿最简单的列表 -->
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :success-text="refreshingTip"
      success-duration="2000"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
        <!-- <van-cell v-for="(item,index) in list" :key="index" :title="item.title" /> -->
        <!-- 使用组件 -->
        <article-item v-for="(item,index) in list" :key="index" :article="item"></article-item>
      </van-list>
      <!-- 注册和使用组件 -->
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleList } from '../api/article.js'
import ArticleItem from '@/components/article-item/index.vue'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  //   定义变量，接收父组件传回来的数据
  props: {
    channel: {
      type: Object,
      require: true
    }
  },
  data () {
    return {
      list: [],
      loading: false, // 列表是否在加载中
      finished: false, // 列表是否完成加载
      timestamp: Date.now(), // 时间戳,做分页
      //   控制错误提示的数据
      error: false, // 是否存在错误
      refreshing: false,
      refreshingTip: '' // 下拉显示文字
    }
  },
  created () {
  },
  mounted () {},
  methods: {
    async onLoad () {
    // 1. 请求获取数据
      try {
        const { data: { data: { results, pre_timestamp: timestamp } } } =
    await getArticleList({
      // 频道ID
      channel_id: this.channel.id,
      //  你可以把timestamp理解为页码
      timestamp: this.timestamp
      // 如果请求第1页数据：当前最新时间戳 Date.now
      // 如果请求之后的数据，使用本次接口返回的数据中的 pre_timestamp
      // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
    })
        // 模拟随机失败的情况
        // if (Math.random() > 0.5) {
        // //   产生错误
        //   JSON.parse('abcdef')
        // }
        // 模拟随机失败的情况
        // 2. 把请求结果数据放到 list 数组中
        // 数组的展开操作符，它会把数组元素一个一个拿出来
        this.list.push(...results) // 保存数据
        // 3. 本次数据加载结束之后要把加载状态设置为结束
        this.loading = false

        // 4. 判断数据是否全部加载完成
        if (results.length === 0) {
          // 没有数据了，将 finished 设置为 true，不再 load 加载更多了
          this.finished = true
        }
        // 更新获取下一页数据的时间戳
        this.timestamp = timestamp
      // 没有数据了，将 finished 设置为 true，不再 load 加载更多了
      // 展示错误提示状态
        //   处理错误
      } catch (error) {
        this.loading = false
        this.error = true
      }
    },
    async onRefresh () {
      try {
        // 请求获取数据
        const { data: { data: { results } } } =
      await getArticleList({
        //   频道
        channel_id: this.channel.id,
        timestamp: Date.now()
        // 下拉刷新，每次请求获取最新数据，所以传递当前时间戳
      })
        this.list.unshift(...results)
        // 记录数据更新状态
        this.refreshingTip = `更新了${results.length}条数据`
      } catch (error) {
        console.log(error)
      }
      this.refreshing = false
    }
  }
}

</script>

<style lang="less" scope>
.article_list{
    height: 79vh;
    overflow-y:auto;
}
</style>